<extend name="_layout/main"/>
<block name="head">
    <style>
        #main {
            margin-top: 1.5rem;
        }
        select{
            width:60%;

        }
    </style>
</block>

<block name="top">
    <header class="mui-bar mui-bar-nav report-header box-s" id="header">
        <a href="javascript:history.go(-1)"><i class="iconfont icon-fanhui fl"></i></a>
        <p>添加新地址</p>
        <span class="fr baocun" id="btn-save">保存</span>
    </header>
</block>
<block name="content">
    <div id="main" class="mui-clearfix add-address">
        <form id="ad-form" action="{:U('add')}" >
        <div class="plist clearfloat data">
            <ul>
                <li class="clearfloat">

                    <p class="fl">收货人</p>
                    <input type="text" class="fl shuru" name="realname" id="realname" value="" placeholder="收货人姓名"/>

                </li>
                <li class="clearfloat">
                    <p class="fl">电话</p>
                    <input type="text" class="fl shuru" name="mobile" id="mobile" value="" placeholder="联系电话"/>
                </li>
                <li class="clearfloat">
                    <p class="fl">省份</p>
                    <select name="province" id="province">
                        <option value="">省份</option>
                        <volist name="area" id="item">
                            <eq name="item.area_parent_id" value="0">
                            <option value="{$item.area_id}">{$item.area_name}</option>
                            </eq>
                        </volist>
                    </select>
                </li>
                <li class="clearfloat">
                    <p class="fl">城市</p>
                    <select name="city" id="city">
                        <option value="">城市</option>
                    </select>
                </li>
                <li class="clearfloat">
                    <p class="fl">区域</p>
                    <select name="area" id="area">
                        <option value="">区域</option>
                    </select>
                </li>
            </ul>
        </div>
        <textarea name="address" id="address" rows="4" cols="" placeholder="请填写详细地址" class="textare box-s"></textarea>
        <div class="address-btn clearfloat">
            <span class="szwmr fl">设为默认</span>
            <p class="szwmr fr">
            <input type="checkbox" name="is_default" value="1" />
            </p>
        </div>
        </form>
    </div>
</block>
<block name="scripts">
    <script>
        $(document).on('change', '#province', function (e) {
            var pid = $(this).val();
            if (pid) {
                $.ajax({
                    url: "{:U('get_city')}",
                    type: 'get',
                    dataType: 'json',
                    data: {pid: pid},
                    success: function (xdata) {
                        if (xdata) {
                            var html = '<option value="">选择城市</option>';
                            for (var i in xdata) {
                                html += '<option value="' + xdata[i].area_id + '">' + xdata[i].area_name + '</option>'
                            }
                            $("#city").html(html);
                        }
                    }
                })
            }
        })

        $(document).on('change', '#city', function (e) {
            var pid = $(this).val();
            if (pid) {
                $.ajax({
                    url: "{:U('get_city')}",
                    type: 'get',
                    dataType: 'json',
                    data: {pid: pid},
                    success: function (xdata) {
                        if (xdata) {
                            var html = '';
                            for (var i in xdata) {
                                html += '<option value="' + xdata[i].area_id + '">' + xdata[i].area_name + '</option>'
                            }
                            $("#area").html(html);
                        }
                    }
                })
            }
        })

        $(document).on('click', '#btn-save', function (e) {
            e.preventDefault();
            var form = $("#ad-form");
            if(!form.is('form')){
                return;
            }

            var action = form.attr('action');
            var data = form.serialize();
            $.post(action, data, function (xdata) {
                if(xdata.status == 'success'){
                    mui.alert(xdata.message,'成功',function () {
                        document.location.href = xdata.data.url;
                    });
                }else{
                    mui.alert(xdata.message);
                }
            },'json')
        })
    </script>
</block>